<template>
  <div>
    <BaseAudit :callbackFn="beforeSubmit" :beforeSubmitFn="hadleSubmit" :isNeedDetails="true">
      <template slot="extraOption">
        <title-name title="选择预验收小组成员"></title-name>
        <div class="about-master-container mb20">
          <a-row>
            <a-form-model
              v-for="(item, index) in form.preAcceptanceTeam"
              :key="item.id"
              ref="preAcceptanceTeam"
              :model="item"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 18 }"
              :rules="rules"
            >
              <a-col :xs="24" :sm="12" :md="8" :lg="8">
                <a-form-model-item :label="index == 0 ? '预验收小组成员及分工' : ' '" :colon="index == 0">
                  <a-row type="flex" justify="space-between" style="margin-top:-3px">
                    <span>
                      <span class="mr20">{{ item.name }}</span
                      >{{ item.jobTitle || '' }}
                    </span>
                    <a class="del_btn" @click.stop="form.preAcceptanceTeam.splice(index, 1)">移除</a>
                  </a-row>
                  <a-button
                    v-if="index == form.preAcceptanceTeam.length - 1"
                    type="primary"
                    icon="plus"
                    @click="visible = true"
                    >添加</a-button
                  >
                </a-form-model-item>
              </a-col>
              <a-col :xs="24" :sm="12" :md="8" :lg="8">
                <a-form-model-item label="分工" prop="laborWork" class="requiredFormItem">
                  <BaseInput :maxLength="30" v-model="item.laborWork"></BaseInput>
                </a-form-model-item>
              </a-col>
              <a-col :xs="24" :sm="12" :md="8" :lg="8">
                <a-form-model-item label="验收部位/内容" prop="acceptanceContent" class="requiredFormItem">
                  <BaseInput :maxLength="30" v-model="item.acceptanceContent"></BaseInput>
                </a-form-model-item>
              </a-col>
            </a-form-model>
            <a-col v-show="!form.preAcceptanceTeam || form.preAcceptanceTeam.length < 1" :span="24">
              <a-form-model-item label="预验收小组成员" prop="preAcceptanceTeam">
                <a-button type="primary" icon="plus" @click="visible = true">添加</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
      </template>
      
    </BaseAudit>
    <!-- 表单弹窗 -->
    <search-by-org ref="dialogEdit" :visible.sync="visible" headerTitle="选择人员" @confirm="submitForm" />
  </div>
  
</template>

<script>
import BaseAudit from '@/views/matters/approval/components/BaseAudit'
import SearchByOrg from '@/components/businessComponents/SearchByOrg' // 选择人员
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import { application } from '@/api/quality/unitProject' // api

export default {
  name: 'RiskAudit',
  extends: new BaseEditPage(),
  components: {
    BaseAudit,
    SearchByOrg,
  },
  data() {
    return {
      // 添加人员模态框显示隐藏
      visible: false,
      form: {
        preAcceptanceTeam: [],
        id: this.$route.query.businessId
      },
      btnStatus: '',
      rules: {
        preAcceptanceTeam: [{ type: 'array', required: true, message: '请添加预验收小组成员', trigger: 'change' }],
        laborWork: [{ required: true, whitespace: true, message: '请输入分工', trigger: 'change' }],
        acceptanceContent: [{ required: true, whitespace: true, message: '请输入验收部位/内容', trigger: 'change' }],
      },
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 提交调度校验
     */
     beforeSubmit(e) {
      // 'approval' || 'unApproval'   通过 || 不通过
      this.btnStatus = e
      if (e === 'unApproval') {
        return true
      } else {
        if (this.form.preAcceptanceTeam.length == 0) {
          this.$message.warning('请添加预验收小组成员')
          return false
        } else {
          let result = true
          for (let index in this.$refs.preAcceptanceTeam) {
            let item = this.$refs.preAcceptanceTeam[index]
            item.validate((res) => {
              // 校验到最后一个验收人员表单
              if (!res) {
                result = false
              }
            })
          }
          return  result
        }
      }
    },
    /**
     * 提交调度
     */
    hadleSubmit(e) {
      this.form.id = this.id
      let form = this.form
      if (this.btnStatus === 'unApproval') {
        return new Promise((resolve) => {
          resolve(true)
        })
      } else {
        if (this.form.preAcceptanceTeam.length > 0) {
          form.preAcceptanceTeam = this.form.preAcceptanceTeam.map(item => {
            const json = {
              acceptanceContent: item.acceptanceContent,
              id: item.id,
              jobTitle: item.jobTitle,
              laborWork: item.laborWork,
              name: item.name,
            }
            return json
          })
          return application.addMembers(form)
        } else {
          this.$message.warning('请添加预验收小组成员')
        }
      }
    },
    /**
     * 选择预验收人员
     */
     submitForm(e) {
      if (this.form.preAcceptanceTeam?.some((item) => item.id === e.id)) {
        this.$message.warning('此人员已添加')
      } else {
        this.form.preAcceptanceTeam.push(e)
        this.$message.success('添加成功，请输入分工和验收部分')
        this.visible = false
      }
    },
  }
}
</script>


<style lang="less" scoped>
/deep/  .ant-form-item .ant-form-item-label {
  width: 180px;
  padding-right: 10px;
}
/deep/ .ant-form-item .ant-form-item-control-wrapper {
  width: calc(100% - 180px);
}
</style>
